<template>
  <div class="div">
    <div class="top">
      <p>|</p>
      <span> 考勤记录</span>
    </div>
    <el-divider />
    <div class="da">
      <span> 考勤记录列表</span>
      <el-button type="info" class="add" @click="dao">导出</el-button>
    </div>
    <div class="bb">
      <div class="top1">
        <span>搜索</span>
        <el-input
          placeholder="请输入考勤组名称"
          v-model="query.name"
          size="large"
          type="text"
          autocomplete="off"
        />
      </div>

      <div class="fen">
        所在项目
        <el-select
          clearable
          v-model="query.items"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="fen">
        所在承建商
        <el-select
          clearable
          v-model="query.contractor"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="fen2">
        所在班组
        <el-select
          clearable
          v-model="query.class"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="time">
        <span>考勤日期</span>
        <el-input
          placeholder="请输入日期"
          v-model="query.data"
          size="large"
          type="text"
          autocomplete="off"
        />
        
      </div>
      <el-button type="success" class="sou" @click="search">搜索</el-button>
    </div>
    <div class="table">
      <el-table
        :data="tableData.slice((page - 1) * limit, page * limit)"
        :header-cell-style="{ backgroundColor: 'rgb(242,242,242)' }"
        border
        style="
          width: 98%;
          height: 200px;
          margin: auto;
          margin-top: 20px;
          font-size: 12px;
          color: black;
          text-align: center;"
      >
        <el-table-column prop="id" label="序号" width="100">
          <template #default="scope">
            <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="人员姓名" width="100" />
        <el-table-column prop="phone" label="联系电话" width="100" />
        <el-table-column prop="items" label="所在项目" width="100" />
        <el-table-column prop="contractor" label="所在承建商" width="100" />
        <el-table-column prop="class" label="所在班组" width="100" />
        <el-table-column prop="data" label="考勤日期" width="100" />
        <el-table-column prop="Signin" label="签到时间" width="100" />
        <el-table-column prop="countersign" label="签退时间" width="100" />
        <el-table-column
          prop="attendancetimes"
          label="约定出勤（h）"
          width="100"
        />
        <el-table-column prop="Actual" label="实际出勤（h）" width="100" />
        <el-table-column
          prop="Workovertime"
          label="加班出勤（h）"
          width="100"
        />
        <el-table-column prop="status" label="出勤状态" width="100" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="info" @click="obtnop">出行记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="list3">
      <span class="span3">{{ page }}</span>
      <span class="span4">首页</span>
      <el-pagination
        background
        @current-change="changepage"
        v-model:current-page="currentpage"
        layout="prev, pager, next"
        :total="30"
      />

      <span class="span5">显示01-03条 {{ page }}</span>
    </div>
  </div>
  <Recors
    v-show="isShowdown"
    @hidden="hidden"
    @updatesuccess="successf4"
  ></Recors>
</template>

<script setup lang="ts">
import service from "../../utils/service";
import * as XLSX from "xlsx";
import { ArrowDown } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import Recors from "./record/list.vue";

const value = ref("");
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]);

let options: any = [];
const value1 = ref();
const value2 = ref();
interface Ilisst {
  id: string;
  name: string;
  phone: string;
  items: string;
  groups: string;
  class: string;
  data: string;
  Signin: string;
  countersign: string;
  attendancetimes: number;
  Actual: number;
  Workovertime: number;
  status: string;
  contractor: string;
}
const tableData = reactive<Ilisst[]>([]);
//获取列表详情
const changdata = () => {
  service({
    url: "/rulelist",
  }).then((res) => {
    tableData.push(...res.data);
  });
};
changdata();
const options1 = [
  {
    value: "xxxxx项目1",
    label: "xxxxx项目1",
  },
  {
    value: "xxxxx项目2",
    label: "xxxxx项目2",
  },
  {
    value: "全部",
    label: "全部",
  },
];
const options2 = [
  {
    label: "---请选择---",
    value: "---请选择---",
  },
  {
    label: "承建商1",
    value: "承建商1",
  },
  {
    label: "承建商2",
    value: "承建商2",
  },
  {
    label: "承建商3",
    value: "承建商3",
  },
];
const options3 = [
  {
    label: "---请选择---",
    value: "---请选择---",
  },
  {
    label: "班组1",
    value: "班组1",
  },
  {
    label: "班组2",
    value: "班组2",
  },
  {
    label: "班组3",
    value: "班组3",
  },
];
const isShowdown = ref(false);
const obtnop = () => {
  isShowdown.value = true;
};
const hidden = () => {
  isShowdown.value = false;
};
const successf4 = () => changdata();

//搜索
const query = reactive<{
  name?: string;
  items?: string;
  class?: string;
  data?: string;
  contractor?: string;
}>({
  name: "",
  items: "",
  class: "",
  data: "",
  contractor: "",
});
const search = () => {
  service({
    url: "/rulelist",
    params: {
      name: query.name,
      items: query.items,
      class: query.class,
      continue: query.contractor,
      data: query.data,
    },
  }).then((res) => {
    tableData.length=0
    tableData.push(...res.data)

    console.log(res.data);
  });
};
//分页
const limit = ref(2);
const page = ref(1);
const currentpage = ref();

const changepage = (value: number) => {
  page.value = value;
  currentpage.value = value;
  service({
    url: "/rulelist",
    method: "get",
    params: {
      _page: currentpage.value,
      _limit: 2,
    },
  }).then((res) => {
    tableData.length=0
    tableData.push(...res.data)
    // tableData.length = 0,
   
  });
};
const dao=()=>{
  const data = XLSX.utils.json_to_sheet(tableData)//此处tableData.value为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
  XLSX.writeFile(wb,'test.xlsx')//test.xlsx为自定义的文件名

}
</script>

<style scoped>
.top {
  display: flex;
}
.top p {
  color: #3bb19c;
}
.top span {
  font-weight: 700;
}

.el-divider {
  margin-top: -3px;
}
.da {
  margin-top: 15px;
}
.da span {
  font-weight: 700;
}
.da .add {
  float: right;
}
.bb {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
}
.bb .top1 {
  display: flex;
}
.bb .top1 .el-input {
  width: 200px;
  height: 40px;
  margin-left: 10px;
}
.bb .top1 span {
  line-height: 40px;
}
.bb .fen {
  margin-left: 20px;
  margin-top: -7px;
}
.bb .fen2 {
  margin-top: 8px;
}
.bb .time {
  display: flex;
  margin-top: 11px;
  margin-left: 20px;
}
.bb .time .el-input{
  width: 200px;
  margin-left: 10px;
}
.bb .time span {
  line-height: 30px;
}
.bb .sou {
  margin-left: 20px;
  margin-top: 11px;
}
.table {
  margin-top: 10px;
}
.list3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
.span3 {
  width: 40px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background: #999999;
  border-radius: 5px;
  text-align: center;
}

.span4 {
  width: 60px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background-color: rgba(153, 153, 153, 1);
  border-radius: 5px;
}

.span5 {
  width: 114px;
  height: 20px;
  font-size: 12px;
  color: rgb(102, 102, 102);
  margin-left: 10px;
}
</style>
